<template>
  <!-- <page-loading :show="pageLoading"> -->
  <view class="wrap" @click="hideTips">
    <view class="flex flex-jc-sa">
      <view
        class="top-btn flex flex-dir-c flex-jc-sa flex-ai-c"
        @click.stop="gotoPage('newMaintenanceOrder/newMaintenanceOrder')"
      >
        <i-icon
          icon="iconxinjianyemiantianjia"
          type="single"
          size="50rpx"
          color="#333"
        ></i-icon>
        <text>新建订单</text>
      </view>
      <view
        class="top-btn flex flex-dir-c flex-jc-sa flex-ai-c"
        @click.stop="scanPage"
      >
        <i-icon
          icon="iconshouye-saoma"
          type="single"
          size="50rpx"
          color="#333"
        ></i-icon>
        <text>扫码核销</text>
      </view>
    </view>
    <!--    订单信息-->
    <view class="container">
      <view class="title flex">
        <view class="status-box">
          <i-icon
            :icon="statusIcon"
            type="single"
            size="26rpx"
            color="#FDD421"
          ></i-icon>
        </view>
        <text class="status">{{ info.statuStr }}</text>
        <view class="queue-list flex-1 flex flex-wrap-w">
          <view
            class="color-999 queue"
            v-for="(key, item, i) in info.queueStrs"
            :key="i"
            >{{ item }}
            <text class="color-EB5C02"> {{ key }} </text>
          </view>
        </view>
      </view>
      <view class="item car flex" @click.stop="gotoPage('carInfo/carInfo')">
        <view class="car-left flex-1">
          <view class="flex">
            <image class="img" :src="info.brandImg" mode="aspectFit"></image>
            <view class="color-333">{{ info.carName }}</view>
          </view>
          <view class="flex">
            <view class="color-999">车牌号：</view>
            <view class="color-333">{{ info.carNum }}</view>
          </view>
          <view class="flex">
            <view class="color-999">vin:</view>
            <view class="color-333">{{ info.vin }}</view>
          </view>
        </view>
        <u-icon
          class="pl-10"
          name="arrow-right"
          color="#999"
          size="26rpx"
        ></u-icon>
      </view>
      <view class="item flex-ai-c">
        <view class="flex-1 flex flex-ai-c" @click="editUserName">
          <i-icon
            class="pr-10"
            icon="iconkehudangan"
            type="single"
            size="26rpx"
            color="#FDD421"
          ></i-icon>
          <view class="color-333">{{ info.userName }}</view>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>

        <view class="color-333 pr-10" @click="call(info.userMobile)">{{
          info.userMobile
        }}</view>
        <i-icon
          icon="icon76"
          type="single"
          size="30rpx"
          color="#FDD421"
        ></i-icon>
      </view>
      <view class="item">
        <view class="color-999"> 创建： </view>
        <view class="color-333 flex flex-1 flex-jc-sb">{{
          info.createMethod
        }}</view>
        <view class="color-333">{{ info.addTime }}</view>
      </view>
    </view>
    <!--    施工检查流程-->
    <view class="container" v-if="info.arriveId && !isOnlyWash">
      <view class="title">
        <text class="title-text">施工检查流程</text>
      </view>
      <view class="item" @click.stop="gotoVisual">
        <view class="color-333"> 预检 </view>
        <view class="text-right">
          <text :class="yjColor">
            {{ yjText }}
          </text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
      </view>
      <view class="item" @click.stop="gotoDismantle">
        <view class="color-333"> 上线检查 </view>
        <view class="text-right">
          <text :class="sjColor">
            {{ sjText }}
          </text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
      </view>
      <view
        class="item"
        @click.stop="gotoPage('newMaintenanceOrder/newMaintenanceOrder')"
      >
        <view class="color-333"> 创建报价单 </view>
        <view class="text-right">
          <text class="color-EB5C02" v-if="info.testInfo.orderInfo > 0">
            总计：{{ info.testInfo.orderInfo }} 已生成订单
          </text>
          <text class="color-999" v-else> 下单前填写 </text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
      </view>
      <view class="item" @click.stop="gotoworkExcption">
        <view class="color-333"> 施工异常 </view>
        <view class="text-right">
          <text class="color-333 pr-10" v-if="info.testInfo.workExcption > 0">
            <text class="color-EB5C02">
              {{ info.testInfo.workExcption }}
            </text>
            处异常
          </text>
          <text :class="sgColor">
            {{ sgText }}
          </text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
      </view>
      <view class="item" @click.stop="gotoPage('qualityTest/qualityTest')">
        <view class="color-333"> 质检 </view>
        <view class="text-right">
          <text :class="zjColor">
            {{ zjText }}
          </text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
      </view>
      <view
        class="item"
        @click.stop="gotoPage('deliveryCarReport/deliveryCarReport')"
      >
        <view class="color-333"> 交车报告 </view>
        <view class="text-right">
          <text class="color-333" v-if="info.testInfo.getCarReportStatus === 3">
            已签字确认
          </text>
          <text
            class="color-EB5C02"
            v-else-if="info.testInfo.getCarReportStatus === 2"
          >
            等待客户签字确认
          </text>
          <text class="color-999" v-else> 三检客户统一签名 </text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
      </view>
    </view>
    <!--    关联订单-->
    <view class="container container-order" v-if="info.orders">
      <view class="title">
        <text class="title-text">关联订单/商品</text>
        <!--        ui确认暂时不显示 -->
        <!--        <u-icon name="question-circle" color="#999" size="30rpx"></u-icon>-->
      </view>
      <u-collapse>
        <view v-for="(item, index) in info.orders" :key="index">
          <arrival-record-order
            :info="item"
            :current="orderId === item.orderId"
            :orderIndex="index"
            @selOrder="selOrder"
          ></arrival-record-order>
        </view>
      </u-collapse>
      <view class="bg-f6"></view>
    </view>
    <!--    底部按钮-->
    <view class="foot flex flex-ai-c">
      <view class="more color-333" @click.stop="showBottomTips">更多</view>
      <view
        class="border-666 cricle color-666"
        @click="selTip(orderStatus === 11 ? 5 : 4)"
        >{{ orderStatus === 11 ? '恢复施工' : '暂停施工' }}</view
      >
      <view class="border-666 cricle color-666" @click="selTip(2)">派工</view>
      <view class="bg-FDD421 cricle color-333" @click="selTip(0)"
        >新建订单</view
      >
    </view>

    <!--    顶部操作更多弹窗-->
    <view v-show="showTop">
      <view class="content-list content-list-top content-list-down">
        <view>
          <u-icon
            name="arrow-up-fill"
            color="rgba(0,0,0,0.7)"
            size="28"
            style="position: absolute; top: -21rpx; left: 170rpx"
          ></u-icon>
        </view>
        <view
          v-for="(item, index) in topList"
          :key="index"
          @click="handleTips(item.value)"
          >{{ item.name }}</view
        >
      </view>
    </view>
    <!--    底部操作更多弹窗-->
    <view v-show="showBottom">
      <view class="content-list content-list-bottom content-list-down">
        <view
          v-for="(item, index) in bottomList"
          :key="index"
          @click="handleTips(item.value)"
          >{{ item.name }}</view
        >
        <view>
          <u-icon
            name="arrow-down-fill"
            color="rgba(0,0,0,0.7)"
            size="28"
            style="position: absolute; bottom: -21rpx; left: 20rpx"
          ></u-icon>
        </view>
      </view>
    </view>

    <!--   确认 弹窗-->
    <view>
      <u-modal
        :title="modalTitle"
        v-model="showModal"
        width="74%"
        :mask-close-able="true"
        :title-style="{
          fontWeight: 'bold',
          fontSize: '36rpx',
          color: '#333333',
        }"
        :show-confirm-button="false"
      >
        <view class="slot-content">
          <rich-text :nodes="modalText"></rich-text>
        </view>
        <view class="woxiangxbox">
          <view>
            <button class="slot-contentbutto2" @click="modalCancel">
              {{ modalBtnLeft }}
            </button>
          </view>
          <view>
            <button class="slot-contentbutto" @click="modalConfirme">
              {{ modalBtnRight }}
            </button>
          </view>
        </view>
      </u-modal>
    </view>

    <!-- 选择技师 -->
    <technician-selector
      ref="technicianSel"
      :showoppen="showSelector"
      @selTechnician="selTechnician"
      @closeEchnician="closeEchnician"
    ></technician-selector>

    <!-- 弹框提示 -->
    <u-popup v-model="popupShow" mode="bottom" width="100%" border-radius="20">
      <view class="popup-content">
        <view class="title">温馨提示</view>
        <view class="content flex flex-ai-c">
          <view style="padding-bottom: 10rpx">姓名</view>
          <view class="flex-1 input-box flex flex-ai-c flex-jc-sb">
            <input
              class="uni-input"
              maxlength="20"
              v-model="editName"
              placeholder="请填写客户姓名"
            />
            <i-icon icon="iconqiyebianji" color="#999" size="38rpx"></i-icon>
          </view>
        </view>
        <view class="btn-box flex">
          <button class="btn-left" @click="cancel">取消</button>
          <button class="btn-right" @click="okey">确定</button>
        </view>
      </view>
    </u-popup>
  </view>
  <!-- </page-loading> -->
</template>

<script src="./arrivalRecordDeatil.js"></script>

<style lang="scss" scoped>
@import './arrivalRecordDeatil.scss';
</style>
